<template>
	<view class="add-cart">
		<view class="add-cart-header">
			<image class="img" :src="serverUrl+goodsData.img_url[0]" mode="scaleToFill"></image>
			<view class="add-cart-title">
				<goods-price :types="types" :active="active"></goods-price>
				<view class="other-info">剩余{{stock}}件</view>
				<view class="other-info" v-if="active==-1">请选择 尺寸</view>
				<view class="other-info" v-else>已选 {{types[active].size}}</view>
			</view>
		</view>
		<view style="padding-top:50rpx;font-size: 30rpx;">尺寸</view>
		<view class="goods-size">
			<view class="size-tag" :class="{active:active==i}" v-for="(item,i) in types" :key="i"
				@click="$emit('handleSize',i)">
				<view style="font-size:30rpx">{{item.size}}</view>
				<view style="font-size:25rpx" :class="active==i?'active' :'uni-info'">￥{{item.price}}.00</view>
			</view>
		</view>
		<view v-if="isCartPage">
			<view class="handle" style="margin-top: 80rpx;">
				<view class="buy" @click="changeSize(active)">
					确定
				</view>
			</view>
		</view>
		<view v-else>
			<view class="goods-count">
				<view>购买数量</view>
				<view>
					<uni-number-box v-model="num" min="1" max="10"></uni-number-box>
				</view>
			</view>
			<view class="handle">
				<view class="complex" v-if="btnSty=='complex'">
					<view class="will-buy" @click="addCart">加入购物车</view>
					<view class="buy" @click="buyNow">立即购买</view>
				</view>
				<view class="will-buy" v-else-if="btnSty=='will-buy'" @click="addCart">加入购物车</view>
				<view class="buy" v-else-if="btnSty=='buy'" @click="buyNow">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "add-cart",
		props: {
			btnSty: { // 底部btn样式
				type: String,
				default: 'complex'
			},
			goodsData: {
				type: Object,
				default: {},
			},
			active: {
				type: Number,
				default: -1,
			},
			isCartPage: {
				typeof: Boolean,
				default: false,
			}
		},
		data() {
			return {
				num: 1,
				types: [],
				stock: 999,
			};
		},
		watch: {
			goodsData(newValue) {
				this.types = newValue.types;
			},
			active(newVal) {
				this.stock = newVal != -1 ? this.types[newVal].stock : this.types.reduce((pre, curr) => pre + curr.stock,
					0);
			}
		},
		methods: {
			// 选中规格点击确定
			changeSize(active) {
				if (active == -1) {
					uni.showToast({
						title: '请选择规格',
						icon: "none"
					});
					return
				}
				this.$emit('clickOkBtn', this.types[active]);
			},
			// 将商品加入购物车
			async addCart() {
				if (this.active == -1) {
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					})
					return
				}
				let data = this.getAddData();
				await uni.$http.reqCartAddGoods(data);
				this.$emit('addCartOk');
			},
			// 立即购买
			buyNow() {
				if (this.active == -1) {
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					})
					return
				};
				let data = this.getAddData();
				this.$store.commit('SET_PD_ORDER', [data]);
				uni.navigateTo({
					url: '/subpkg/verify-order/verify-order',
				});
			},
			// 加购商品信息
			getAddData() {
				let {
					_id,
					img_url,
					name
				} = this.goodsData;
				let {
					size,
					price
				} = this.types[this.active];
				let data = {
					goods_id: _id,
					user_id: this.user_id,
					img_url: img_url[0],
					size,
					price,
					name,
					buy_num: this.num,
				}
				return data
			},

		},
	}
</script>

<style lang="scss">
	.add-cart {
		box-sizing: border-box;
		width: 100%;
		padding: 20rpx 25rpx 10rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.add-cart-header {
		display: flex;

		.img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10%;
		}

		.add-cart-title {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 40rpx 0 10rpx 25rpx;

			.other-info {
				color: #999;
				font-size: 25rpx;
			}
		}
	}

	.goods-size {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 50rpx;

		.size-tag {
			box-sizing: border-box;
			min-width: 150rpx;
			padding: 6rpx 10rpx;
			margin: 20rpx 20rpx 0 0;
			background-color: #f7f8fa;
		}

		.active {
			color: $my-tawny;
			background-color: $my-beige;
		}
	}

	.goods-count {
		display: flex;
		justify-content: space-between;
	}

	.handle {
		box-sizing: border-box;
		width: 100%;
		height: 80rpx;
		margin-top: 150rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 700;
		border-radius: 40rpx;
		overflow: hidden;

		.complex {
			display: flex;

			.buy,
			.will-buy {
				flex: 1
			}
		}

		.will-buy {
			background-color: $my-beige;
			color: $my-tawny;
		}

		.buy {
			background-color: $my-tawny;
			color: #fff;
		}
	}
</style>
